<template>
    <div>
<el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="账号" prop="pass">
    <el-input type="text" v-model="ruleForm.pass" autocomplete="off" id="useinp"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" id="passinp"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="age">
    <el-input v-model="ruleForm.age" id="emainp"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm()">提交</el-button>
    <el-button @click="resetForm()">重置</el-button>
  </el-form-item>
</el-form>
<el-table
    :data="tableData"
    style="width: 100%"
    max-height="250">
    <el-table-column
      fixed
      prop="date"
      label="编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码"
      width="120">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="120">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
</template>

<script>
    export default {
    data() {

      return {
        //   name:this.ruleForm.pass,
        //   password:this.ruleForm.checkPass,
        //   email:this.ruleForm.age,
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        tableData: [],
        tableObj:{
            name:'',
            password:'',
            email:''
        },
      };
    },
    methods: {
      submitForm() {
          const obj={...this.tableObj}
        this.tableData.push(obj)
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }

</script>

<style lang="less" scoped>

</style>